<template>
  <view class="tab-bar">
    <view 
      class="tab-item" 
      :class="{ active: currentTab === 'home' }" 
      @click="switchTab('home')"
    >
      <text class="iconfont icon-home"></text>
      <text class="tab-label">首页</text>
    </view>
    <view 
      class="tab-item" 
      :class="{ active: currentTab === 'files' }" 
      @click="switchTab('files')"
    >
      <text class="iconfont icon-folder"></text>
      <text class="tab-label">文件</text>
    </view>
    <view 
      class="tab-item" 
      :class="{ active: currentTab === 'photos' }" 
      @click="switchTab('photos')"
    >
      <text class="iconfont icon-image"></text>
      <text class="tab-label">相册</text>
    </view>
    <view 
      class="tab-item" 
      :class="{ active: currentTab === 'me' }" 
      @click="switchTab('me')"
    >
      <text class="iconfont icon-user"></text>
      <text class="tab-label">我</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue';
import { navigateToTab } from '@/utils/navigation';

const props = defineProps({
  activeTab: {
    type: String,
    default: 'home'
  }
});

const emit = defineEmits(['change']);

// 计算当前激活的选项卡
const currentTab = ref(props.activeTab);

// 监听props变化，同步更新当前选中的标签
watch(() => props.activeTab, (newVal) => {
  currentTab.value = newVal;
});

// 切换底部选项卡
const switchTab = (tab: string) => {
  if (currentTab.value === tab) return; // 如果点击当前已选中的标签，不做操作

  currentTab.value = tab;
  emit('change', tab);
  
  // 使用导航工具进行页面跳转
  navigateToTab(tab);
};
</script>

<style>
/* 底部标签栏样式 */
.tab-bar {
  height: 100rpx;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #eeeeee;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* 适配底部安全区 */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9e9e9e;
  padding: 6rpx 0;
  flex: 1;
}

.tab-item.active {
  color: var(--primary-color, #2196F3);
}

.tab-item text:first-child {
  font-size: 40rpx;
  margin-bottom: 4rpx;
}

.tab-label {
  font-size: 20rpx;
  line-height: 1;
}
</style> 